<template>
  <view class="main dispaly flex-warp">
    <view class="img" v-for="(item, index) in imgUrlList" :key="item">
      <image class="cover" :src="item" mode="aspectFill"></image>
      <image class="up-bg" src="/static/icon/up.png" mode="aspectFill" ></image>
      <view class="close" @click="deleteImage(index)">
        <image  src="/static/icon/clo.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="up" v-if="imgUrlList.length < props.number">
      <image class="ad-bg" src="/static/icon/up.png" mode="aspectFill" ></image>
      <view class="ad-box dispaly-align-center" @click="upload">
        <image class="ad" src="/static/icon/ad.png" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  dUpload
} from '@/utils/util.js'
import {
  ref
} from 'vue';

const props = defineProps({
  number: {
    type: String || Number,
    default: 1
  }
})
// 图片上传
let imgUrlList = ref([
  "https://mangzhuang.xinguanghudong.com/profile//2024/08/08/O1ZAUTnqVLoE7e6ab6d97357b7d575d9dcbbfccb7819_20240808175234A002.png",
  "https://mangzhuang.xinguanghudong.com/profile//2024/08/08/O1ZAUTnqVLoE7e6ab6d97357b7d575d9dcbbfccb7819_20240808175234A002.png"
])
const upload = async () => {
  const res = await dUpload(4)
  imgUrlList.value.push(res)
  console.log(imgUrlList.value, 'imgUrlList')
}

const deleteImage = (index) => {
  imgUrlList.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.main {
  .up {
    margin: 8rpx;
    width: 144rpx;
    height: 144rpx;
    position: relative;
    .ad-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 144rpx;
      height: 144rpx;
    }
    .ad-box {
      width: 144rpx;
      height: 144rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      .ad {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }

  .img {
    position: relative;
    width: 144rpx;
    height: 144rpx;
    margin: 8rpx;
    .cover {
      width: 130rpx;
      height: 130rpx;
      position: absolute;
      top: 9rpx;
      left: 9rpx;
      right: 0;
    }
    .up-bg {
      width: 144rpx;
      height: 144rpx;
    }


    .close {
      position: absolute;
      top: 15rpx;
      right: 15rpx;
      image {
        width: 38rpx;
        height: 38rpx;
      }
    }
  }
}
</style>